<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类

    // 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

    class Cat {
        // 构造器 => 定义构造函数
        constructor(name, color, type) {
            // 实例化对象的属性/方法
            this.name = name;
            this.color = color;
            this.type = type;
        }
        // class中如果需要定义静态属性和方法 需要在属性和方法前添加关键字 static
        static hello = "hello Cat";
        static isCat(arg) {
            if (arg.constructor === Cat) {
                return true;
            }
            return false;
        }

        // class中定义的变量 会直接作为实例化对象的属性存储
        species = "Cat";

        // class中定义的方法会存储到构造函数的原型对象中
        skill() {
            console.log("捉老鼠");
        }
        call() {
            console.log("喵喵");
        }
        say() {
            console.log(this.name, this.color);
        }

    }
    // 如果非要在原型对象上添加属性,可以在class创建完毕之后手动添加
    // Cat.prototype.species = "Cat";
    console.dir(Cat)

    var Tom = new Cat("Tom", "black", "田园");
    console.log(Tom);

















    // 可以理解为定义了构造函数的原型对象(JS中不能这么写) 
    /* function Cat() {

    }
    Cat.prototype = {
        constructor(name, color, type) {
            this.name = name;
            this.color = color;
            this.type = type;
        }
        species = "Cat";
        skill() {
            console.log("捉老鼠");
        }
        call() {
            console.log("喵喵");
        }
        say() {
            console.log(this.name, this.color);
        }
    }

    console.log(Cat); */






</script>

</html>